<template>
  <div class="sku-selector">
    <!-- 颜色选择 -->
    <div class="sku-row">
      <div class="sku-label">颜色</div>
      <div class="sku-options">
        <div
          v-for="color in skuData.colors"
          :key="color.name"
          class="sku-option color-option"
          :class="{ active: selectedSku.color === color.name }"
          @click="handleSelect('color', color.name)"
        >
          <el-image 
            class="color-image"
            :src="color.image"
            :alt="color.name"
            fit="cover"
          >
          </el-image>
          <span class="color-name">{{ color.name }}</span>
        </div>
      </div>
    </div>

    <!-- 尺寸选择 -->
    <div class="sku-row">
      <div class="sku-label">尺寸</div>
      <div class="sku-options">
        <div
          v-for="size in skuData.sizes"
          :key="size"
          class="sku-option size-option"
          :class="{ active: selectedSku.size === size }"
          @click="handleSelect('size', size)"
        >
          {{ size }}
        </div>
      </div>
    </div>

    <!-- 数量选择 -->
    <div class="sku-row">
      <div class="sku-label">数量</div>
      <div class="quantity-selector">
        <el-input-number 
          v-model="quantity"
          :min="1"
          :max="99999"
          @change="handleQuantityChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  // SKU 数据
  skuData: {
    type: Object,
    required: true,
    default: () => ({
      colors: [],
      sizes: [],
    })
  },
  // 初始选择
  initialSku: {
    type: Object,
    default: () => ({
      color: '',
      size: '',
      image: ''
    })
  },
  // 初始数量
  initialQuantity: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['update:sku', 'update:quantity'])

// 选中的 SKU
const selectedSku = ref({
  color: props.initialSku.color,
  size: props.initialSku.size,
  image: props.initialSku.color ? 
    props.skuData.colors.find(c => c.name === props.initialSku.color)?.image : ''
})

// 选中的数量
const quantity = ref(props.initialQuantity)

// 处理 SKU 选择
const handleSelect = (type, value) => {
  selectedSku.value[type] = value

  // 如果是选择颜色，同时更新image
  if (type === 'color') {
    const selectedColor = props.skuData.colors.find(color => color.name === value)
    selectedSku.value.image = selectedColor ? selectedColor.image : ''
  }
  
  emit('update:sku', { ...selectedSku.value })
}

// 处理数量变化
const handleQuantityChange = (value) => {
  emit('update:quantity', value)
}
</script>

<style lang="scss" scoped>
.sku-selector {
  margin-top: 20px;
  .sku-row {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    
    .sku-label {
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
      margin-right: 20px;
    }
    
    .sku-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      
      .color-option {
        padding: 4px;
        
        .color-image {
          width: 40px;
          height: 40px;
          border-radius: 2px;
          display: block;
          border: 1px solid #ddd;
        }
        
        .color-name {
          display: block;
          text-align: center;
          margin-top: 4px;
          font-size: 12px;
        }
      }
      
      .sku-option {
        padding: 6px 12px;
        border: 1px solid #ddd;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          border-color: #FA5566;
        }
        
        &.active {
          color: #FA5566;
          border-color: #FA5566;
        }
      }
    }
    
    .quantity-selector {
      display: flex;
      align-items: center;
      gap: 15px;
    }
  }
}
</style>